<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../semantic/dist/semantic.css">
    <title>Semantic UI</title>
    <style>
    .card>.image>img {
        height: 240px!important;
    }
    </style>
</head>

<body>

    <div class="ui container">

        <div class="ui dividing header"> Practice </div>

        <button class="ui primary button">按钮</button>
        <div class="ui animated positive button">
            <div class="visible content">看的到</div>
            <div class="hidden content">看不到</div>
        </div>
        <div class="ui animated negative fade button">
            <div class="visible content">看的到</div>
            <div class="hidden content">看不到</div>
        </div>
        <div class="ui animated secondary vertical button">
            <div class="visible content">看的到</div>
            <div class="hidden content">看不到</div>
        </div>

        <div class="ui labeled button">
            <div class="ui red button">
                <i class="heart icon"></i>
            </div>
            <div class="ui red basic label">喜欢吗</div>
        </div>

        <div class="ui red labeled icon button">
            <i class="heart icon"></i> 非常喜欢
        </div>

        <div class="ui buttons">
            <div class="ui positive button">Positive</div>
            <div class="or"></div>
            <div class="ui negative button">Negative</div>
        </div>


        <div class="ui divider"></div>


        <div class="ui input">
            <input type="text" placeholder="搜索...">
        </div>

        <div class="ui icon input">
            <input type="text" placeholder="搜索...">
            <i class="search red inverted circular icon"></i>
        </div>


        <div class="ui divider"></div>


        <div class="ui three ordered steps">
            <div class="ui step active">
                <i class="truck icon"></i>
                <div class="content">
                    <div class="title">配送</div>
                    <div class="description">选择合适您的配送方式</div>
                </div>
            </div>
            <div class="ui step disabled">
                <i class="payment icon"></i>
                <div class="content">
                    <div class="title">支付</div>
                    <div class="description">多渠道支付</div>
                </div>
            </div>
            <div class="ui step disabled">
                <i class="info icon"></i>
                <div class="content">
                    <div class="title">信息</div>
                    <div class="description">查看您的订单状态</div>
                </div>
            </div>
        </div>


        <div class="ui divider"></div>


        <div class="ui small rotate circular reveal image">
            <img src="http://p3.pstatp.com/thumb/363f000edf6840440bbd" class="visible content">
            <img src="http://p9.pstatp.com/thumb/289e000b0b1bb94a822c" class="hidden content">
        </div>

        <div class="ui fade padded reveal">
            <div class="ui visible content">
                <div class="ui piled segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur similique molestiae quisquam in sed labore itaque odio at, harum voluptatibus dolore, expedita ipsum deleniti ad minus sequi natus! Ipsa, porro!</div>
            </div>
            <div class="ui hidden content">
                <div class="ui info message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus saepe nisi nostrum, sit quibusdam, magnam ut qui recusandae sint commodi fugiat rem quod quis cum provident et deleniti neque accusamus. <i class="close icon"></i></div>
            </div>
        </div>


        <div class="ui divider"></div>


        <div class="ui doubling four cards">
            <div class="card">
                <div class="image">
                    <img src="http://p3.pstatp.com/large/19440001283a4dbdbde0" alt="">
                </div>
                <div class="content">
                    <div class="header">赞这个粉色闪电，接下来的三天会出现一件让你开心到哭的好消息</div>
                    <div class="meta"> 1 小时之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p1.pstatp.com/large/1b120000c83a9029d4ac" alt="">
                </div>
                <div class="content">
                    <div class="header">觉得黄渤比某志龙帅的点个赞吧～</div>
                    <div class="meta"> 20 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p1.pstatp.com/large/193d00044fd06774962a" alt="">
                </div>
                <div class="content">
                    <div class="header">让我多当一会人质!</div>
                    <div class="meta">
                        <span> 5 分钟之前</span>
                    </div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p3.pstatp.com/large/1940000510274ed23b56" alt="">
                </div>
                <div class="content">
                    <div class="header">听说星爷的动图视频都是先赞后看</div>
                    <div class="meta"> 1 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p3.pstatp.com/large/19410004ecbf71ddab5b" alt="">
                </div>
                <div class="content">
                    <div class="header">听说星爷的动图视频都是先赞后看</div>
                    <div class="meta"> 1 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p3.pstatp.com/large/38d6000357b391c5391f" alt="">
                </div>
                <div class="content">
                    <div class="header">我的妈啊</div>
                    <div class="meta"> 1 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p1.pstatp.com/large/17ff00050778dfce4373" alt="">
                </div>
                <div class="content">
                    <div class="header">人怎样才能快乐，我希望评论是一句话就能点醒的那种，拜托了长友们</div>
                    <div class="meta"> 1 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="image">
                    <img src="http://p9.pstatp.com/large/337c00038f609b4eb64a" alt="">
                </div>
                <div class="content">
                    <div class="header">这就很尴尬了。。。</div>
                    <div class="meta"> 1 分钟之前</div>
                </div>
                <div class="extra content">
                    <div class="left floated">
                        <i class="empty heart icon"></i>喜欢 <span>1,024</span>
                    </div>
                    <div class="right floated">
                        <i class="frown icon"></i>讨厌
                    </div>
                </div>
            </div>
        </div>


    </div>

    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../semantic/dist/semantic.js"></script>
    <script>
        $('.ui.reveal').on('click', function(event) {
            $(this).transition('fly left')
        })
        $('.card').mouseover(function(){
            $(this).transition('pulse')
        })
    </script>
</body>

</html>
